<template>
  <div>
    <el-button type="success" size="medium" @click="dialog.addshow = true"
            >添加</el-button
          > 
    <!-- 列表 -->
    <el-table
      size="small"
      :data="parkingList"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column
        prop="pkNo"
        label="泊位编号"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="geoModel"
        label="地磁型号"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="pkStatus"
        label="泊位状态"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
            <span v-if="scope.row.pkStatus== -1">未激活</span>
            <span v-if="scope.row.pkStatus== 0">可用</span>
            <span v-if="scope.row.pkStatus== 1">停用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="pkActiveTime"
        label="激活时间"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="pkCreatedTime"
        label="创建时间"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.pkId)"
            >编辑</el-button
          >
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.pkId)"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-dialog title="添加车位" :visible.sync="dialog.addshow" width="30%">
      <el-form :model="form">
        <el-form-item label="泊位编号" :label-width="formLabelWidth">
          <el-input v-model="addForm.pkNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择地磁" :label-width="formLabelWidth">
          <el-select v-model="addForm.geoModel" placeholder="请选择地磁">
            <el-option
              v-for="(geo, index) in geoList"
              :key="index"
              :label="geo.geoModel"
              :value="geo.geoModel"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择路段" :label-width="formLabelWidth">
          <el-select v-model="addForm.secId" placeholder="请选择路段">
            <el-option
              :label="section.secName"
              :value="section.secId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">选择创建时间</span>
            <el-date-picker
              v-model="addForm.pkCreatedTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">选择激活时间</span>
            <el-date-picker
              v-model="addForm.pkActiveTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="泊位状态" :label-width="formLabelWidth">
          <el-radio v-model="addForm.pkStatus" label="-1">未激活</el-radio>
          <el-radio v-model="addForm.pkStatus" label="0">可用</el-radio>
          <el-radio v-model="addForm.pkStatus" label="1">停用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addshow = false">取 消</el-button>
        <el-button type="primary" @click="addParking()">提 交</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改车位" :visible.sync="dialog.updateshow" width="30%">
      <el-form :model="form">
        <el-form-item label="泊位编号" :label-width="formLabelWidth">
          <el-input v-model="updateForm.pkNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路段名称" :label-width="formLabelWidth">
          <el-input v-model="section.secName" :disabled="true" autocomplete="off"></el-input>
          <el-input type="hidden" v-model="section.secId"></el-input>
        </el-form-item>
        <el-form-item label="选择地磁" :label-width="formLabelWidth">
          <el-select v-model="updateForm.geoId" placeholder="请选择地磁">
            <el-option
              v-for="(geo, index) in geoList"
              :key="index"
              :label="geo.geoModel"
              :value="geo.geoId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">选择创建时间</span>
            <el-date-picker
              v-model="updateForm.pkCreatedTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">选择激活时间</span>
            <el-date-picker
              v-model="updateForm.pkActiveTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="泊位状态" :label-width="formLabelWidth">
          <el-radio v-model="updateForm.pkStatus" label="-1">未激活</el-radio>
          <el-radio v-model="updateForm.pkStatus" label="0">可用</el-radio>
          <el-radio v-model="updateForm.pkStatus" label="1">停用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="updateParking()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
   data() {
     return {
        sid:0,
        parkingList:[],
        section:{},
        geoList:[],
        loading: false,
        dialog:{
          addshow:false,
          updateshow:false,
        },
        addForm:{},
        updateForm:{},
     };
   },
   methods: {
    handleDelete(id){
      this.$axios.delete("/parking/" + id).then(res => {
        if(res.data.code == 200){
          this.$message.success("删除成功");
          this.loadParking();
        }
      })
    },
    updateParking(){
      this.$axios.put("/parking",this.updateForm).then(res => {
        if(res.data.code ==200){
          this.dialog.updateshow = false;
          this.loadParking();
        }
      })
    },
    handleEdit(id){
      this.dialog.updateshow = true;
      this.$axios.get("/parking/park/" + id).then(res =>{
        this.updateForm = res.data.data.parking;
      })
    },
    addParking(){
      this.$axios.post("/parking/add",this.addForm).then(res => {
        if(res.data.code == 200){
          this.dialog.addshow = false;
          this.loadParking();
        }
      })
    },
    // loadSec(){
    //   this.$axios.get("/sections").then(res => {
    //     this.secList = res.data.data.sectionList;
    //   })
    // },
    loadSec(){
      this.$axios.get("/sections/" + this.sid).then(res => {
        this.section = res.data.data.oneSection;
        this.addForm.secId = this.section.secId;
      })
    },
    loadGeo(){
      this.$axios.post("/geos").then(res => {
        this.geoList = res.data.data.geoList;
      })
    },
    loadParking(){
        this.sid = this.$route.query.sid;
        this.$axios.get("/sections/parking/" + this.sid).then(res => {
            this.parkingList = res.data.data.parkingList;
        })
    }
   },
   mounted(){
    this.loadParking();
    this.loadGeo();
    this.loadSec();
   }
};
</script>